import React from 'react';
import { Table, Select, Input, Button, DatePicker } from 'antd';
import styles from './MemberManagement.module.css';

const { Option } = Select;

const data = Array.from({ length: 8 }, (_, index) => ({
  key: index + 1,
  memberInfo: 'Lois 18959879868',
  points: 300,
  orderCount: 5,
  orderAmount: 1100,
  isPaidMember: '是',
  cardBalance: 500,
}));

const columns = [
  {
    title: '序号',
    dataIndex: 'key',
    align: 'center',
    render: (text) => <span>{text}</span>,
  },
  {
    title: '会员信息',
    dataIndex: 'memberInfo',
    align: 'center',
  },
  {
    title: '积分',
    dataIndex: 'points',
    align: 'center',
    },
  {
    title: '下单次数',
    dataIndex: 'orderCount',
    align: 'center',
  },
  {
    title: '下单金额',
    dataIndex: 'orderAmount',
    align: 'center',
  },
  {
    title: '是否为付费会员',
    dataIndex: 'isPaidMember',
    align: 'center',
  },
  {
    title: '卡内余额',
    dataIndex: 'cardBalance',
    align: 'center',
    },
  {
    title: '操作',
    align: 'center',
    render: () => (
      <>
        <a href="#">会员详情</a> <a href="#">修改积分</a> <a href="#">充值</a>
      </>
    ),
  },
];

export default function MemberManagement() {
  return (
    <div className={styles.container}>
      <div className={styles.breadcrumb}>
        当前位置：会员管理 {'>'} 会员查询
      </div>
      <div className={styles.filter}>
        <span>所属门店：</span>
        <Select defaultValue="1" style={{ width: 120 }}>
          <Option value="1">1</Option>
        </Select>
        <span>下单次数：</span>
        <Select defaultValue="1" style={{ width: 120 }}>
          <Option value="1">1</Option>
        </Select>
        <span>成为会员日期：</span>
        <DatePicker.RangePicker />
        <Button type="primary">查询</Button>
        <Button>重置</Button>
      </div>
      <Table columns={columns} dataSource={data} pagination={{ total: 8, pageSize: 10, current: 11 }} />
    </div>
  );
}
